<template>
  <el-dialog v-if="show" v-dialogDrag :visible.sync="show" width="60%" title="高压停电事件用户选择" :close-on-click-modal="false" :before-close="close">
    <span style="float: right" class="fd">
      <el-button type="primary" size="mini" @click="addData">确认</el-button>
      <el-button type="primary" plain size="mini" @click="close">取消</el-button>
      <el-button type="primary" plain size="mini" @click="cccEvent('show', cccTable)">列配置</el-button>
    </span>
    <el-table
      ref="multipleTable"
      size="mini"
      :data="dataList"
      height="calc(100% - 80px)"
      border
      highlight-current-row
      @select="handleChecked"
      @row-click="handleSelected"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column type="index" align="center" label="序号" width="50" />
      <template v-for="col in columnData">
        <el-table-column
          :key="col.id"
          :show-overflow-tooltip="true"
          :prop="col.field"
          :label="col.title"
          :min-width="col.minWidth"
          :align="col.align"
          :header-align="col.align"
          :sortable="col.sortable"
          :fixed="col.fixed"
        />
      </template>
    </el-table>
    <div class="pagination-container">
      <div class="wrap_pagination">
        <el-pagination
          :current-page.sync="paginationList.current"
          :page-size="paginationList.size"
          :page-sizes="[10, 20, 40, 80]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationList.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <ccc ref="ccc" /><!-- 配置列 -->
  </el-dialog>

</template>

<script>
// import { loadDefColumnUser } from '@/api/tools/columnInfo'
import { addBatch } from '@/api/sjwh/yxgy'
import ccc from '@/dialogCommom/ccc'
import { dataModulePrefix } from '../../../../config'
export default {
  components: {
    ccc
  },
  props: {
    dataList: {
      type: Array,
      default() {
        return []
      }
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    tdyhDialog: {
      type: Object,
      default() {
        return {}
      }
    },
    paginationList: {
      type: Object,
      default() {
        return {
          size: 10,
          current: 1,
          total: 0
        }
      }
    }
  },
  data() {
    return {
      show: false,
      columnData: [],
      fatherData: [],
      cccTable: 'zc_gyyhsj' // 列配置表名
    }
  },
  watch: {
    tdyhDialog: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal.show) {
          this.show = newVal.show
          setTimeout(() => {
            this.cccEvent('load', this.cccTable)
          }, 0)
        } else {
          this.show = newVal.show
        }
      }
    }
  },
  beforeUpdate() {
    if (this.tdyhDialog.show) {
      setTimeout(() => {
        this.$refs['multipleTable'].doLayout()
      })
    }
  },
  methods: {
    close() {
      this.$emit('tdthAddClose')
    },
    cccEvent(method, table) {
      if (method === 'show') {
        this.$refs.ccc.show(table)
      } else if (method === 'load') {
        new Promise((resolve, reject) => {
          this.$nextTick(() => {
            resolve(this.$refs.ccc.load(table))
          })
        }).then(response => {
          this.columnData = response
        })
      } else if (method === 'export') {
        const vo = {
          tableCode: table,
          param: this.listQuery,
          url: `${dataModulePrefix}/def-column-user/load`,
          method: 'POST',
          fileName: '高压停电用户数据',
          total: this.total
        }
        this.$refs.ccc.exportExcel(vo)
      }
    },
    handleSizeChange(val) {
      this.$emit('childSize', val)
    },
    handleCurrentChange(val) {
      this.$emit('childCurrent', val)
    },
    handleChecked(item, row) {
      // 把item传递到父级
      this.fatherData = item
    },
    handleSelected() {

    },
    async addData() {
      const arr = []

      this.fatherData.forEach(res => {
        arr.push(res.id)
      })
      // sjId 事件id
      // [id]循环遍历
      await addBatch({ yhids: arr, yxGytdyh: this.formData })
      this.$emit('userData', this.fatherData)
    }
  }
}
</script>

<style scoped lang='scss'>
/deep/ .el-dialog__body {
  // height: 100%;
  padding: 0;
  height: 400px;
}
.el-tabs__header {
  height: 38px;
}
/deep/ .el-tabs__content {
  height: calc(100% - 40px);
  .el-tab-pane {
    height: 100%;
  }
}
.fd {
  margin: 5px;
}
.fd:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.wrap_pagination {
  text-align: center;
}
</style>
